<template>
    <div class="box2">
        <el-card class="card" v-for="item in list.detailsList" :key="item._id">
            <div>{{ item.title }}</div>
            <div class="con">
                <img class="img" :src="item.image.url" v-if="item.image" />
                <p>{{ item.excerpt }}</p>

            </div>
            <div>{{ item.createdAt }}</div>
            <div><el-button @click="delList(item)">删除</el-button></div>
        </el-card>
        <!-- {{ list.detailsList }} -->
        <span>{{ data.id }}</span>
    </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { details, deleteList } from '../utils/api'
import { reactive, ref } from 'vue'

const route = useRoute()

const data = reactive({
    currentPage: 1,
    pageSize: 6,
    id: route.query.id
})

const list = reactive({
    detailsList: []
})

details(data).then((res: any) => {
    console.log(49, res);
    list.detailsList = res.data.list
})

// console.log(list.detailsList);

// 删除
const delList = (item: any) => {
    console.log(42, item._id);
    deleteList(item).then((res) => {
        console.log(44, res);
    })
}
</script>
<style lang="scss" scoped>
.box2 {
    width: 1000px;
    position: absolute;
    left: 50%;
    margin-left: -500px;

    .card {
        width: 100%;
        text-align: left;
        margin: 20px 0;
        padding: 10px;

        .con {
            width: 100%;
            display: flex;
            align-items: center;
            margin: 20px 0;

            .img {
                width: 140px;
                height: 80px;
                margin: 10px;
            }
        }

    }
}
</style>